@if (completionDetails.length > 0) {
    <!-- Completion criterias. -->
    <div class="ion-padding">
        <!-- Dialog header. -->
        @if (isTrackedUser) {
            <h2>{{ 'core.course.youmust' | translate }}</h2>
        } @else {
            <h2>{{ 'core.course.studentsmust' | translate }}</h2>
        }

        <ion-list role="list">
            <ng-container *ngFor="let rule of completionDetails">

                @if (isTrackedUser) {
                    <!-- Show completion status and description to tracked users. -->

                    @if (rule.statusComplete) {
                        <div role="listitem" [attr.aria-label]="rule.accessibleDescription" class="text-success">
                            <ion-icon name="fas-check" aria-hidden="true" />
                            <span class="sr-only">{{ 'core.course.completion_automatic:done' | translate }}</span>
                            {{ rule.rulevalue.description }}
                        </div>
                    }

                    @if (rule.statusCompleteFail) {
                        <div role="listitem" [attr.aria-label]="rule.accessibleDescription" class="text-danger">
                            <ion-icon name="fas-xmark" aria-hidden="true" />
                            <span class="sr-only">{{ 'core.course.completion_automatic:failed' | translate }}</span>
                            {{ rule.rulevalue.description }}
                        </div>
                    }

                    @if (rule.statusIncomplete) {
                        <div role="listitem" [attr.aria-label]="rule.accessibleDescription">
                            <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true" />
                            <span class="sr-only">{{ 'core.course.completion_automatic:todo' | translate }}</span>
                            {{ rule.rulevalue.description }}
                        </div>
                    }

                } @else {
                    <!-- Show only description (without status) to non-tracked users. -->
                    <div role="listitem" [attr.aria-label]="rule.accessibleDescription">
                        <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true" />
                        {{ rule.rulevalue.description }}
                    </div>
                }
            </ng-container>

            <!-- Show also manual completion description in the list to non-tracked users. -->
            @if (isManual && !isTrackedUser) {
                <div role="listitem" class="core-module-completion-todo">
                    <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true" />
                    {{ 'core.course.completion_manual:markdone' | translate }}
                </div>
            }
        </ion-list>
    </div>
} @else {
    <!-- Strange case, probably the conditions were lost in a restore or site upgrade. -->
    <div class="ion-padding">{{ 'core.course.emptyconditionsinfo' | translate }}</div>
}
